<template>
  <div id="echart" class="container view-body" style="min-height: 1004px">
    <div class="blackboard-wra">
      <div class="title">敲黑板</div>
      <span class="con">同学们，有两种方式可以加入班课</span><br>
      <span class="con">1.使用优学院APP扫描班课二维码，确认信息后加入。</span><br>
      <span class="con">2.输入班课编码查找，确认信息后加入。</span><br>
      <span class="con">以上两种方式都需要老师提供二维码和班课编码。</span><br>
      <img class="guide-img"
           src="https://static.ulearning.cn/static/course_web/common/img/stu_joinclass_tea.png"
           alt=""/>
    </div>
    <div class="search-code-wra">
      <h2 class="code-tit">输入编码查找加入</h2>
      <input type="text" class="input-text code-txt" v-model="classes"/>
      <div class="code-tips">
        <span v-if="spanOpen === 1">请询问老师班课编码后，将编码输入在上方</span>
        <span v-else-if="spanOpen === 2"
              style="color: red">请输入班课编码</span>
        <span v-else-if="spanOpen === 3"
              style="color: red">请输入正确格式的班课编码</span>
      </div>
      <button class="button button-red-solid code-btn" @click="search">查找班级</button>
    </div>


    <el-dialog class="modal fade custom-modal join-class-tips in"
               title="加入班课提示"
               :visible.sync="dialogTableVisible"
               style="padding-right: 15px;">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
            <span>班级名称</span> ：
            <span class="color-primary">{{dialog.classes}}</span><br>
            <span>所属课程</span> ：
            <span class="color-primary">{{dialog.courseName}}</span><br>
            <span>机构名称</span> ：
            <span class="color-primary">{{dialog.courseCollege}}</span><br>
            <span>教师</span> ：
            <span class="color-primary">{{dialog.name}}</span><br>
          </div>
          <div class="modal-footer">
            <button type="button"
                    class="button button-red-solid btn-confirm"
                    @click="joinClass">确认加入
            </button>
            <button type="button"
                    class="button button-red-hollow"
                    @click="cancel">取消
            </button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {searchClasses} from "@/apis/student";
import {joinClasses} from "@/apis/student";
import mCharts from 'echarts'

export default {

  data() {
    return {
      dialogTableVisible: false,
      spanOpen: 1,
      classes: '',
      dialog:{
        classes: '',
        courseName: '',
        courseCollege: '',
        name: '',
      },
      id: '',
    }
  },
  created() {

    this.init()
  },
  methods: {
    async init(){

    },
    echartLoading(){



    },
    // 查找班级
    search() {
       this.id = localStorage.getItem("id")

      if(this.classes === "" || this.classes.trim() === ""){
        this.spanOpen = 2
        this.classes = ""
      }
      searchClasses(this.id,this.classes).then((resp) => {
        if(resp?.data?.code === 1){
          this.dialog = resp?.data?.data
          this.dialogTableVisible = true
        }else{
          this.spanOpen = 3
          this.classes = ""
        }
      })
    },

    // 加入班级课程确认
    joinClass(){
      this.id = localStorage.getItem("id")


      joinClasses(this.id, this.classes).then((resp) => {
        if(resp?.data?.code === 1){
          this.$message.success("加入班级课程成功")
          this.dialogTableVisible = false
          this.dialog = {}
          this.classes = ""
        }else{
          this.$message.error(resp?.data?.msg)
        }

      })


    },


    // 取消
    cancel(){
      this.dialogTableVisible = false
    }
  }
}
</script>

<style scoped>

*, :after, :before {
  box-sizing: border-box;
}

div {
  display: block;
  unicode-bidi: isolate;
}


.view-body {
  padding: 80px 32px;
  background-color: #fff;
}

.container {
  width: 1170px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.blackboard-wra {
  padding: 24px 160px 24px 60px;
  margin: 0 auto 50px;
  border: 10px solid #cac7bd;
  border-radius: 14px;
  background-color: #3c3c3c;
  position: relative;
  width: 750px;
  max-width: 88%;
  color: #bbb;
}

.title {
  margin-bottom: 15px;
  font-size: 24px;
  font-weight: 700;
}

.con {
  font-size: 16px;
  line-height: 30px;
}

.guide-img {
  left: -85px;
  position: absolute;
  bottom: -100px;
  vertical-align: middle;
  border: 0;
}

.search-code-wra {
  margin: 0 auto;
  width: 380px;
}

.code-tit {
  text-align: center;
  margin-bottom: 24px;
  font-size: 24px;
  color: #444;
  margin-top: 20px;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
}


.code-txt {
  margin-bottom: 12px;
  border: 1px solid #e3e3e9;
  background-color: #fff;
  width: 100%;
  font-size: 18px;
  font-weight: 700;
  padding: 8px;
  border-radius: 4px;
  height: 40px;
  line-height: 24px;
  box-sizing: border-box;
  outline: none;
  vertical-align: middle;
}


.code-tips {
  color: #969696;
  min-height: 20px;
  font-size: 14px;
  margin-bottom: 36px;
}

.code-btn {
  margin: 0 auto;
  border-radius: 20px;
  display: block;
  width: 120px;
  height: 40px;
  font-size: 18px;
}

.button-red-solid {
  background-color: #7691fc;
  border-color: #7691fc;
}

.button-red-solid:hover {
  background-color: #90a6fc;
  border-color: #90a6fc;
}


.modal {
  right: 0;
  left: 0;
}

::v-deep .el-dialog__header {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding: 12px 24px;
  border: none;
  border-top: 4px solid #ea5947;
}

::v-deep .el-dialog {
  margin-left: auto;
  margin-right: auto;
  transform: translate(0);
  margin-top: 200px !important;
  transition: transform .3s ease-out;
  width: 405px;
  position: relative;
}

::v-deep .el-dialog__body {
  padding: 0;
}

.modal-body {
  padding: 10px 24px 62px;
  min-height: 140px;
  overflow: visible;
  font-size: 14px;
  line-height: 22px;
  position: relative;
}

.color-primary {
  color: #ea5947;
}

.modal-footer {
  border: none;
  text-align: center;
  padding: 15px;
  position: relative;
  bottom: 0;
  width: 100%;
}

.btn-confirm {
  margin-right: 40px;
  padding: 0 10px;
}

.button-red-solid {
  background-color: #7691fc;
  border-color: #7691fc;
}

.button-red-hollow {
  border-color: #e3e3e9;
  color: #7691fc;
  background-color: #fff;
  margin-left: 30px;
}

.button-red-hollow:hover {
  border-color: #7691fc;
}
</style>